<template>
	<view v-if="announcementShow" class="announcement-box">
		<u-notice-bar :text="text" direction="column" mode="closable" :bgColor="bgColor" :color="textColor"
			@close="announcementClose"></u-notice-bar>
	</view>
</template>

<script>
	import {
		http
	} from '@/api/index.js'
	export default {
		data() {
			return {
				text: [],
				announcementShow: true,
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		created() {
			this.getList()
			this.getSetting()
		},
		methods: {
			//获取网站配置
			getSetting() {
				http.post('/api/index/getSetting').then(res => {
					this.bgColor = res.theme_color
					this.textColor = res.font_color
				}).catch(err => {})
			},
			getList() {
				http.post('/api/index/notic').then(res => {
					res.forEach((item, index) => {
						this.text.push(item.content)
					})
				}).catch(err => {

				})
			},
			//关闭公告
			announcementClose() {
				this.announcementShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.announcement-box {
		width: 100%;
		height: 50rpx;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.text {
			flex: 1;
			height: 90%;
			margin: 0rpx 10rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 24rpx;
			line-height: 50rpx;
			color: #959595;
		}
	}
</style>